﻿<script src="../jquery/jquery-2.2.3.min.js"></script>
<script src="../fabricjs/fabric.min.js"></script>
<script src="../js/vue.min.js"></script>
<style>
    .currentMode {
        background-color: blue;
        color: white;
    }
</style>
<div id="app">
    <button @click="SetMode('select')" v-bind:class="{ currentMode: Mode=='select' }">选择模式</button>
    <button @click="SetMode('line')" v-bind:class="{ currentMode: Mode=='line' }">连线模式</button>
    <canvas id="c" style="border:1px solid #DEDEDE;width:600px;height:600px;"></canvas>
</div>
<script>
    var canvas;
    var vue = new Vue({
        el: "#app",
        data: {
            Mode: "select"
        },
        methods: {
            SetMode: function (mode) {
                debugger;
                this.Mode = mode;
                $.each(canvas.getObjects(), function (index, obj) {
                    switch (mode) {
                        case "line":
                            obj["selectable"] = false;
                            break;
                        case "select":
                            obj["selectable"] = true;
                            break;
                    }
                });
                canvas.discardActiveObject();
                canvas.requestRenderAll();
            }
        }
    });

    canvas = new fabric.Canvas('c', { width: 500, height: 500 });
    //方形
    var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
    rect.on('selected', function () {//选中监听事件
        console.log('selected a rectangle');
    });
    //圆形
    var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
    circle.on('selected', function () {
        console.log('selected a circle');
    });

    var line = new fabric.Path('M 65 0 Q 100, 100, 200, 0', { fill: '', stroke: 'black', objectCaching: false, hasControls: false });
    canvas.add(line);


    canvas.add(rect);
    canvas.add(circle);
</script>